<template>
    <NuxtLayout name="default">
        <div
            v-if="tabList.length > 0 && configs[tabActive]?.is_open"
            class="flex flex-col gap-4 h-full"
        >
            <div
                class="square-header"
                :style="{
                    backgroundImage: `url(${tabList[tabIndex]?.banner})`
                }"
            >
                <div class="font-medium text-[36px] text-primary">
                    {{ tabList[tabIndex]?.title }}
                </div>
                <div v-if="tabList.length > 1">
                    <el-radio-group v-model="tabActive" size="large">
                        <el-radio-button
                            v-for="(item, index) in tabList"
                            :key="index"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-radio-group>
                </div>
                <div class="max-w-[680px] w-full">
                    <el-input
                        v-model="keyword"
                        size="large"
                        class="2xl:h-[54px] xl:h-[48px] lg:h-[44px] rounded-[12px]"
                        style="--el-border-color: transparent"
                        :clearable="true"
                        :prefix-icon="Search"
                        placeholder="请输入关键词搜索"
                    />
                </div>
            </div>

            <div class="square-category">
                <div
                    v-for="(item, index) in categoryLists"
                    :key="index"
                    class="cate-item"
                    :class="{ active: categoryIndex === index }"
                    @click="categoryIndex = index"
                >
                    {{ item.name }}
                </div>
            </div>

            <component
                :is="tabComponent[tabActive]"
                :configs="configs[tabActive]"
                :cate-id="categoryLists[categoryIndex]?.id"
                :keyword="keyword"
            />
        </div>

        <div v-else class="flex flex-col gap-4 h-full">
            <el-empty class="flex-1" description="广场已暂停使用" />
        </div>
    </NuxtLayout>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import squareBanner from '~/assets/image/square_banner.png'
import squareApi from '~/api/square'
import Robot from './_components/robot.vue'
import Draws from './_components/draws.vue'
import Video from './_components/video.vue'
import Music from './_components/music.vue'

const route = useRoute()
const router = useRouter()
const type: string = String(route.query?.tab || '')

// 搜索关键词
const keyword = ref<string>('')

// 广场配置
const configs = ref<Record<string, SquareSettingResponse>>({})

// 广场选项
const tabList = ref<any>([])
const tabIndex = ref<number>(0)
const tabActive = ref<string>(type)
const tabComponent: any = {
    robot: Robot,
    draws: Draws,
    video: Video,
    music: Music
}

// 分类数据
const categoryIndex = ref<number>(0)
const categoryLists = ref([] as SquareCategoryResponse[])

/**
 * 查询设置
 */
const querySettings = async () => {
    let index = 0
    const dataList = await squareApi.setting()
    dataList.forEach((item: SquareSettingResponse) => {
        configs.value[item.type] = item
        if (item.is_open === 1) {
            tabList.value.push({
                label: item.name,
                value: item.type,
                title: item.title,
                banner: item.banner || squareBanner
            })
            if (!type && index === 0 || type === item.type) {
                tabActive.value = item.type
                tabIndex.value = index
            }
            index++
        }
    })

    if (configs.value[tabActive.value]) {
        await queryCategory(tabActive.value)
    }
}

/**
 * 查询分类
 *
 * @param {string} type
 * @author zero
 */
const queryCategory = async (type: string) => {
    categoryLists.value = await squareApi.category(type)
    categoryIndex.value = 0
    await router.replace({
        query: {
            tab: type
        }
    })
}

watch(
    () => tabActive.value,
    async (val) => {
        for (let i = 0; i < tabList.value.length; i++) {
            if (tabList.value[i].value === val) {
                tabIndex.value = i
                keyword.value = ''
                await queryCategory(val)
                break
            }
        }
    }
)

onMounted(async () => {
    await querySettings()
})
</script>

<style scoped lang="scss">
.square-category {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 10px 0 0 5px;
    .cate-item {
        padding: 5px 12px;
        font-size: 14px;
        color: var(--el-text-color-regular);
        cursor: pointer;
        border-radius: 3px;
        &.active {
            color: var(--color-white);
            background-color: var(--el-color-primary);
        }
        &:hover:not(.active) {
            color: var(--el-color-primary);
            background-color: var(--el-color-primary-light-9);
        }
    }
}

.square-header {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    justify-content: center;
    height: 300px;
    min-height: 300px;
    padding: 0 20px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: 12px;
}
</style>
